<template>
  <div class="experss-order">
    <!-- 头部筛选搜索 -->
    <el-form class="order-list" :inline="true">
      <el-row>
        <el-col :span="8">
          <el-form-item label="运单编号:" label-width="110px" class="order-form">
            <el-input placeholder="请输入运单编号" style="width:280px ;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单编号:" label-width="110px" class="order-form">
            <el-input placeholder="请输入订单编号" style="width:280px ;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="调度状态:" label-width="110px" class="order-form">
            <el-select placeholder="请选择" style="width: 280px;">
              <el-option label="待调度" value="wait" />
              <el-option label="未匹配线路" value="none" />
              <el-option label="已调度" value="been" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="起始地机构:" label-width="110px" class="order-form1">
            <el-cascader :options="starList" filterable placeholder="请选择起始地机构" clearable :show-all-levels="false" style="width: 280px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目的地机构:" label-width="110px" class="order-form1">
            <el-cascader :options="starList" filterable placeholder="请选择目的地机构" clearable :show-all-levels="false" style="width: 280px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="当前所在机构:" label-width="110px" class="order-form1">
            <el-cascader :options="starList" filterable placeholder="请选择当前所在机构" clearable :show-all-levels="false" style="width: 280px;" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="23">
          <el-form-item class="order-btn">
            <el-button style="background-color: #E15536;color: #fff;width: 90px;height: 40px;">搜索</el-button>
            <el-button style="width: 90px;height: 40px;">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- tab栏 -->
    <el-row class="tab-list" type="flex">
      <el-col><div>全部 <span>55</span></div></el-col>
      <el-col><div>新建 <span>2</span></div></el-col>
      <el-col><div>已装车 <span>0</span></div></el-col>
      <el-col><div>运输中 <span>0</span></div></el-col>
      <el-col><div>到达终端网点 <span>51</span></div></el-col>
      <el-col><div>拒收 <span>2</span></div></el-col>
    </el-row>

    <!-- 表格 -->
    <div class="table-list">
      <el-button style="background-color: #E15536;color: #fff;width: 100px;height: 40px;">调度配置</el-button>
      <el-table :data="tableData" style="width: 100%" stripe class="table-deb" highlight-current-row>
        <el-table-column label="序号" width="60" prop="number" />
        <el-table-column label="运单编号" width="160" prop="id" />
        <el-table-column label="订单编号" width="160" prop="orderId" />
        <el-table-column label="运单状态" width="130" prop="status" />
        <el-table-column label="调度状态" width="100" prop="schedulingStatus" />
        <el-table-column label="起始营业部" width="170" prop="startAgencyId" />
        <el-table-column label="重点营业部" width="170" prop="endAgencyId" />
        <el-table-column label="当前所在机构" width="170" prop="currentAgencyId" />
        <el-table-column label="下一个机构" width="170" prop="nextAgencyName" />
        <el-table-column label="货品总体积（立方米）" width="170" prop="totalVolume" />
        <el-table-column label="货品总重量（千克）" width="170" prop="totalWeight" />
        <el-table-column label="创建时间" width="170" prop="created" />
        <el-table-column label="更新时间" width="170" prop="updated" />
        <el-table-column label="操作" fixed="right" width="85">
          <template>
            <el-button type="text" size="small">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="current-page"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next,jumper"
        :total="400"
      />
    </div>

  </div>
</template>

<script>
export default {
  name: 'Experssorderindex',
  data() {
    return {
      starList: [
        { label: '东北转运中心' },
        { label: '华北转运中心' },
        {
          label: '华中转运中心', children: [
            { label: '武汉分拣中心' }
          ]
        },
        { label: '华东转运中心' }
      ],
      tableData: [{
        number: '1',
        id: 'SL1000000001266',
        orderId: '1635886093968273409',
        status: '到达终端网点',
        schedulingStatus: '已调度',
        startAgencyId: '青羊区营业部',
        endAgencyId: '金牛区营业部',
        currentAgencyId: '金牛区营业部',
        nextAgencyName: '金牛区营业部',
        totalVolume: '0.0001',
        totalWeight: '1',
        created: '2023-03-15 14:13:47',
        updated: '2023-03-15 14:23:43'
      }],
      currentPage: 1
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}

</script>

<style lang="scss" scoped>
.experss-order{
  width: 100%;
  height: 100%;
  padding: 23px 20px 20px 20px;
  background-color: #F3F5F9;

  .order-list{
    width: 100%;
      height: 260px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px 20px 58px 0px;

    .order-btn{
      margin-top: 20px;
      margin-left: 50px;
    }

  }

  .tab-list{
    width: 100%;
    min-height: 48px;
    background-color: #fff;
    margin-top: 20px;
    border-radius: 10px;
    text-align: center;
    line-height: 48px;
    font-size: 14px;
    color: #333333;
    cursor: pointer;

    .el-col-24{
      width: 120px;
    }

    span{
      font-weight: 700;
    }

  }

  .table-list{
    width: 100%;
    height: 760px;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 10px;
    padding: 28px 28px 58px;

    .table-deb{
      width: 100%;
      height: 560px;
      margin-top: 20px;
      border: 1px solid #EBEEF5;
    }

    .el-table{
        font-size: 13px;
        color: #20232A;
    }

    .el-pagination{
      margin-top: 20px;
      height: 32px;
      display: flex;
      padding: 0;
      line-height: 32px;
      justify-content: center;
    }

  }
}
</style>
